<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      margin:0;
    }
  </style>
</head>
<body>
<div id="div1">
  <svg xmlns="http://www.w3.org/2000/svg" width="100vw" height="100vh" >
    <defs>
      <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <path stroke="#F0F0F0" fill="none" d="M0,0H20V20"></path>
      </pattern>
    </defs>
    <rect width="1200" height="1000" fill="url(#grid)" ></rect>

    <text x="100" y="100" dx="20 40 60 80 100" dy="20" style="font-size:50px; font-family: 'Arial';">
      <!--
        emmm 这里设置dy会往后传递 也就是说这里会影响到第二个tspan
      -->
      <tspan fill="red" dy="-20 20">AB</tspan>
      <tspan stroke="green">CDE</tspan>
    </text>
    <path d="M100,0 V200 M0,100 H200" stroke="red"></path>
  </svg>
</div>
<script>

</script>
</body>
</html>
